<template>
  <div class="all">
      <div class="leftPage">
        <!-- 个人信息 -->
        <div class="information">
          <!-- 头像等信息 -->
          <div class="visual">
            <div class="headPicture"><img :src="userMessage.userUrl" alt=""></div>
            <div class="material">

              <div class="icon">
                <span>{{userMessage.userName}}</span>
                <span>
                  <img  v-if="userMessage.userSex==1" src="../../assets/男.png" alt="">
                  <img v-else src="../../assets/女.png" alt="">
                  </span>
                <span><img src="../../assets/教师.png" alt=""></span>
              </div>
              <div class="cell">
                <span><img src="../../assets/手机.png" alt=""></span>
                <span>{{userMessage.userTel}}</span>
                <span @click="changePhone">更换手机号</span>
              </div>
            </div>
            <!-- 编辑资料小图标 -->
            <div class="edit" @click="dataEdit">
              <img src="../../assets/编辑资料.png" alt="">
              <span>编辑资料</span>
              </div>
          </div>
          <!-- 地址等详细信息 -->
          <div class="details">
            <ul>
              <li>
                <span>教龄 :</span>
                <span>{{teacherMessage.tracherAge}}年</span>
              </li>
              <li>
                <span>职称 :</span>
                <span>{{teacherMessage.teacherJobtitle}}</span>
              </li>
            </ul>
             <ul>
              <li>
                <span>擅长分数 :</span>
                <span>{{teacherMessage.fractionalSegment}}分</span>
              </li>
              <li>
                <span>所在学校 :</span>
                <span>{{teacherMessage.school}}</span>
              </li>
            </ul>
             <ul>
               <li>
               <span>地址 :</span>
               <span>{{teacherMessage.teacherProvince+teacherMessage.teacherCity+teacherMessage.teacherArea}}</span>
               </li>
             </ul>
          </div>
        </div>
        <!-- 自我介绍 -->
        <div class="selfIntroduction">
          <div class="title">自我介绍</div>
          <div class="text">{{teacherMessage.teacherContent}}</div>
        </div>
        <!-- 教学经历 -->
        <div class="teachExperience">
          <div class="title">教学经历</div>
          <div class="textFirst" v-for="(item,index) in teacherMessage.curriculumVitaeList" :key="index">
            <p>2016年4月8日~2018年4月8日</p>
            <p>本人性格开朗，对待工作认真负责，待人真诚，善于沟通、协调，有较强的组织能力与团队精神；上进心强、勤于学习能不断进步自身的能力与综合素质。在未来的实习工作中，我将以充沛的精力，刻苦钻研的精神来努力工作。</p>
          </div>
        </div>  
      </div>
      <div class="rightPage">
        <div class="uploading">
            <div class="single" @click="uploadSingle">
               <p><img src="../../assets/上传单一视频.png" alt=""></p>
               <p>上传单一视频</p>
            </div>
            <div class="series" @click="uploadSeriec">
               <p><img src="../../assets/上传系列视频.png" alt=""></p>
               <p>上传系列视频</p>
            </div>
        </div>
        <div class="securityCertificate">
          <p>安全认证</p>
          <div class="identity" @click="identityApprove">
           <img src="../../assets/身份证认证.png" alt="">
           <span>身份认证</span>
           <span>您上传的证件信息我们将为您保密，仅用于一生教育的平台的认证。</span>
           <span v-if="approveStatus.identityStatus==1" style="color:#999999;">详情<i class="el-icon-arrow-right"></i></span>
           <span v-else-if="approveStatus.identityStatus==0" style="color:#f39c12;">审核中<i class="el-icon-arrow-right"></i></span>
           <span v-else-if="approveStatus.identityStatus==2" style="color:#f93a3a;">审核失败<i class="el-icon-arrow-right"></i></span>
           <span v-else style="color:#f93a3a;">去认证<i class="el-icon-arrow-right"></i></span>
          </div>
          <div class="teacherLicence" @click="teacherApprove">
           <img src="../../assets/教师认证.png" alt="">
           <span>教师证认证</span>
           <span>教师资格证书，是最能证明您符合老师身份</span>
           <span v-if="approveStatus.teacherStatus==1" style="color:#999999;">详情<i class="el-icon-arrow-right"></i></span>
           <span v-else-if="approveStatus.teacherStatus==0" style="color:#f39c12;">审核中<i class="el-icon-arrow-right"></i></span>
           <span v-else-if="approveStatus.teacherStatus==2" style="color:#f93a3a;">审核失败<i class="el-icon-arrow-right"></i></span>
           <span v-else style="color:#f93a3a;">去认证<i class="el-icon-arrow-right"></i></span>
          </div>
          <div  class="studentLicence" @click="studentApprove">
           <img src="../../assets/学生认证.png" alt="">
           <span>学生认证</span>
           <span>您上传的证件信息我们将为您保密，仅用于一生教育的平台的认证。</span>
           <span v-if="approveStatus.jobtitleStatus==1" style="color:#999999;">详情<i class="el-icon-arrow-right"></i></span>
           <span v-else-if="approveStatus.jobtitleStatus==0" style="color:#f39c12;">审核中<i class="el-icon-arrow-right"></i></span>
           <span v-else-if="approveStatus.jobtitleStatus==2" style="color:#f93a3a;">审核失败<i class="el-icon-arrow-right"></i></span>
           <span v-else style="color:#f93a3a;">去认证<i class="el-icon-arrow-right"></i></span>
          </div>
          <div class="educationLicence" @click="educationApprove">
           <img src="../../assets/学历认证.png" alt="">
           <span>学历认证</span>
           <span>在职大学生，可以通过提交学生认证成为一位兼职老师。</span>
           <span v-if="approveStatus.educationalBackgroundStatus==1" style="color:#999999;">详情<i class="el-icon-arrow-right"></i></span>
           <span v-else-if="approveStatus.educationalBackgroundStatus==0" style="color:#f39c12;">审核中<i class="el-icon-arrow-right"></i></span>
           <span v-else-if="approveStatus.educationalBackgroundStatus==2" style="color:#f93a3a;">审核失败<i class="el-icon-arrow-right"></i></span>
           <span v-else style="color:#f93a3a;">去认证<i class="el-icon-arrow-right"></i></span>
          </div>
          <div class="degreeLicence" @click="degreeApprove">
           <img src="../../assets/学位认证.png" alt="">
           <span>学位认证</span>
           <span>资历越多，越能得到家长、学生的认可。</span>
            <span v-if="approveStatus.specialGradeTeacherStatus==1" style="color:#999999;">详情<i class="el-icon-arrow-right"></i></span>
           <span v-else-if="approveStatus.specialGradeTeacherStatus==0" style="color:#f39c12;">审核中<i class="el-icon-arrow-right"></i></span>
           <span v-else-if="approveStatus.specialGradeTeacherStatus==2" style="color:#f93a3a;">审核失败<i class="el-icon-arrow-right"></i></span>
           <span v-else style="color:#f93a3a;">去认证<i class="el-icon-arrow-right"></i></span>
          </div>
          <div class="professionLicence" @click="professionalApprove">
           <img src="../../assets/专业认证.png" alt="">
           <span>专业认证</span>
           <span>您的专业技能也是学生比较关注的</span>
           <span v-if="approveStatus.professionStatus==1" style="color:#999999;">详情<i class="el-icon-arrow-right"></i></span>
           <span v-else-if="approveStatus.professionStatus==0" style="color:#f39c12;">审核中 <i class="el-icon-arrow-right"></i></span>
           <span v-else-if="approveStatus.professionStatus==2" style="color:#f93a3a;">审核失败<i class="el-icon-arrow-right"></i></span>
           <span v-else style="color:#f93a3a;">去认证<i class="el-icon-arrow-right"></i></span>
          </div>
        </div>
      </div>
  </div>
</template>


<script>
export default {
  data() {
     return{
      userMessage:{},
      teacherMessage:{},
      approveStatus:{}
      }
  },
  created() {
    this.utils.$get(this.utils.GET_USER_MESSAGE,data=>{
      // console.log(data)
      this.userMessage = data.data
    })
     this.utils.$get(this.utils.GET_TEACHER_MESSAGE,data=>{
      console.log(data)
      this.teacherMessage = data.data
    })
    this.utils.$get(this.utils.GET_USER_APPROVE,data=>{
      // console.log(data)
      this.approveStatus = data.data
    })
  },
  methods:{
    changePhone(){
      this.$router.push({path:'/changePhone'})
    },
    dataEdit(){
      this.$router.push({path:'/dataEdit'})
    },
    uploadSingle(){
      this.$router.push({path:'/video_only'})
    },
    uploadSeriec(){
      this.$router.push({path:'/video_seriec'})
    },
    identityApprove(){
      this.$router.push({path:'/identityApprove'})
    },
    teacherApprove(){
      this.$router.push({path:'/teacherApprove'})
    },
    studentApprove(){
      this.$router.push({path:'/studentApprove'})
    },
    educationApprove(){
      this.$router.push({path:'/educationApprove'})
    },
    degreeApprove(){
      this.$router.push({path:'/degreeApprove'})
    },
    professionalApprove(){
      this.$router.push({path:'/professionalApprove'})
    },
  }
};
</script>


<style lang="less">
.all {
  position: relative;
  // padding: 20px;
  .leftPage {
    width: 50%;

    // height: 800px;
    // width: 604px;
    // margin-top: 30px;
    // margin-left: 30px;
    .information {
      .visual {
        // height: 180px;
        // width: 605px;
        padding-bottom: 30px;
        position: relative;
        border-bottom: 2px solid #e5e5e5;
        .headPicture {
          width: 120px;
          height: 120px;
          // background-color: pink;
          border-radius: 7px;
          vertical-align: middle;
          >img{
             width: 120px;
             height: 120px;
          }
        }
        .material {
          .icon {
            position: absolute;
            top: 23px;
            left: 150px;
            > span:nth-child(1) {
              font-size: 20px;
              color: #232323;
              font-weight: 600;
              margin-right: 20px;
            }
            > span:nth-child(2) {
              margin-right: 20px;
            }
          }
          .cell {
            position: absolute;
            top: 83px;
            left: 150px;

            > span:nth-child(1) {
              margin-right: 10px;
              >img{
              vertical-align: middle;
              }
            }
            > span:nth-child(2) {
              margin-right: 20px;
              font-size: 14px;
              color: #333333;
            }
            > span:nth-child(3) {
              font-size: 14px;
              color: #4d9bcd;
            }
          }
        }
        .edit {
          > img {
            position: absolute;
            top: 22px;
            left: 575px;
          }
          > span {
            position: absolute;
            top: 63px;
            left: 559px;
            // overflow: hidden;
            float: left;
            width: 96px;
            height: 29px;
            font-size: 14px;
            color: #cccccc;
          }
        }
      }
      .details {
        margin-top: 30px;
        > ul:nth-child(1) {
          display: flex;
          > li:nth-child(1) {
            // width: 302px;
            width: 50%;
            > span:nth-child(1) {
              font-size: 16px;
              color: #999999;
            }
            > span:nth-child(2) {
              font-size: 16px;
              color: #232323;
              font-weight: 600;
            }
          }
          > li:nth-child(2) {
            > span:nth-child(1) {
              font-size: 16px;
              color: #999999;
            }
            > span:nth-child(2) {
              font-size: 16px;
              color: #232323;
              font-weight: 600;
            }
          }
        }
        > ul:nth-child(2) {
          margin-top: 20px;
          display: flex;
          > li:nth-child(1) {
            width: 50%;
            > span:nth-child(1) {
              font-size: 16px;
              color: #999999;
            }
            > span:nth-child(2) {
              font-size: 16px;
              color: #232323;
              font-weight: 600;
            }
          }
          > li:nth-child(2) {
            > span:nth-child(1) {
              font-size: 16px;
              color: #999999;
            }
            > span:nth-child(2) {
              font-size: 16px;
              color: #232323;
              font-weight: 600;
            }
          }
        }
        > ul:nth-child(3) {
          margin-top: 20px;
          display: flex;
          margin-bottom: 50px;
          > li {
            > span:nth-child(1) {
              font-size: 16px;
              color: #999999;
            }
            > span:nth-child(2) {
              font-size: 16px;
              color: #232323;
              font-weight: 600;
            }
          }
        }
      }
    }
    .selfIntroduction {
      font-size: 16px;
      color: #232323;
      // height: 150px;
      .title {
        margin-bottom: 10px;
      }
      .text {
        background-color: #f6f6f6;
        padding-top: 30px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
        line-height: 28px;
      }
    }

    .teachExperience {
      font-size: 16px;
      color: #232323;
      margin-top: 30px;
      .title {
        margin-bottom: 10px;
      }
      .textFirst {
        background-color: #f6f6f6;
        > p:nth-child(1) {
          font-weight: 600;
          padding-top: 30px;
          text-align: center;
        }
        > p:nth-child(2) {
          padding-top: 30px;
          padding-left: 20px;
          padding-right: 20px;
          padding-bottom: 30px;
          line-height: 28px;
        }
      }
      // .textSecond {
      //   background-color: #f6f6f6;
      //   > p:nth-child(1) {
      //     font-weight: 600;
      //     padding-top: 30px;
      //     text-align: center;
      //   }
      //   > p:nth-child(2) {
      //     padding-top: 30px;
      //     padding-left: 20px;
      //     padding-right: 20px;
      //     padding-bottom: 30px;
      //     line-height: 28px;
      //   }
      // }
    }
  }
  .rightPage {
    width: 50%;
    position: absolute;
    top: 20px;
    left: 50%;
    .uploading {
      // height: 214px;
      display: flex;
      justify-content: space-around;
      padding-bottom: 40px;
      .single {
        > p:nth-child(2) {
          font-size: 16px;
          color: #232323;
          margin-top: 14px;
        }
      }
      .series {
        > p:nth-child(2) {
          font-size: 16px;
          color: #232323;
          margin-top: 14px;
        }
      }
    }
    .securityCertificate {
      border-top: 2px solid #e5e5e5;
      margin-left: 20px;
      padding-top: 40px;
      position: relative;
      > p {
        font-size: 18px;
        color: #000000;
        font-weight: 600;
        margin-bottom: 40px;
      }
      >div{
        >span{
          &:nth-child(4){
            float: right;
          }
        }
      }
      .identity {
        padding-bottom: 40px;
        border-bottom: 2px solid #e5e5e5;
        > img {
          padding-right: 11px;
          vertical-align: middle;
        }
        > span:nth-child(2) {
          padding-top: 40px;
          font-size: 16px;
          color: #333333;
          font-weight: 600;
          vertical-align: center;
        }
        > span:nth-child(3) {
          font-size: 14px;
          color: #555555;
          position: absolute;
          left: 22%;
        }
        > span:nth-child(4) {
          font-size: 14px;
          color: #999999;
        }
        .next {
          position: absolute;
          right: 0.2%;
          // margin-left: 10px;
          vertical-align: bottom;
        }
      }
      .teacherLicence {
        padding-top: 40px;
        // padding-bottom: 40px;
        > img {
          padding-right: 11px;
          vertical-align: middle;
        }
        > span:nth-child(2) {
          padding-top: 40px;
          font-size: 16px;
          color: #333333;
          font-weight: 600;
          vertical-align: center;
        }
        > span:nth-child(3) {
          font-size: 14px;
          color: #555555;
          position: absolute;
          left: 22%;
        }
        > span:nth-child(4) {
          font-size: 14px;
          color: #f93a3a;
          float: right;
          // float: right;
        }
        .next {
          position: absolute;
          right: 0.2%;
          // margin-left: 10px;
          vertical-align: bottom;
        }
      }
      .studentLicence {
        padding-top: 40px;
        padding-bottom: 40px;
        > img {
          padding-right: 11px;
          vertical-align: middle;
        }
        > span:nth-child(2) {
          padding-top: 40px;
          font-size: 16px;
          color: #333333;
          font-weight: 600;
          vertical-align: center;
        }
        > span:nth-child(3) {
          font-size: 14px;
          color: #555555;
          position: absolute;
          left: 22%;
        }
        > span:nth-child(4) {
          font-size: 14px;
          color: #f39c12;
          float: right;
          // float: right;
        }
        .next {
          position: absolute;
          right: 0.2%;
          // margin-left: 10px;
          vertical-align: bottom;
        }
      }
      .educationLicence {
        padding-bottom: 40px;
        border-bottom: 2px solid #e5e5e5;
        > img {
          padding-right: 11px;
          vertical-align: middle;
        }
        > span:nth-child(2) {
          padding-top: 40px;
          font-size: 16px;
          color: #333333;
          font-weight: 600;
          vertical-align: center;
        }
        > span:nth-child(3) {
          font-size: 14px;
          color: #555555;
          position: absolute;
          left: 22%;
        }
        > span:nth-child(4) {
          font-size: 14px;
          color: #999999;
          float: right;
          // float: right;
        }
        .next {
          position: absolute;
          right: 0.2%;
          // margin-left: 10px;
          vertical-align: bottom;
        }
      }
      .degreeLicence {
        padding-top: 40px;
        // padding-bottom: 40px;
        > img {
          padding-right: 11px;
          vertical-align: middle;
        }
        > span:nth-child(2) {
          padding-top: 40px;
          font-size: 16px;
          color: #333333;
          font-weight: 600;
          vertical-align: center;
        }
        > span:nth-child(3) {
          font-size: 14px;
          color: #555555;
          position: absolute;
          left: 22%;
        }
        > span:nth-child(4) {
          font-size: 14px;
          color: #999999;
          float: right;
          // float: right;
        }
        .next {
          position: absolute;
          right: 0.2%;
          // margin-left: 10px;
          vertical-align: bottom;
        }
      }
      .professionLicence {
        padding-top: 40px;
        // padding-bottom: 40px;
        > img {
          padding-right: 11px;
          vertical-align: middle;
        }
        > span:nth-child(2) {
          padding-top: 40px;
          font-size: 16px;
          color: #333333;
          font-weight: 600;
          vertical-align: center;
        }
        > span:nth-child(3) {
          font-size: 14px;
          color: #555555;
          position: absolute;
          left: 22%;
        }
        > span:nth-child(4) {
          font-size: 14px;
          color: #999999;
          // float: right;
          // float: right;
        }
        .next {
          position: absolute;
          right: 0.2%;
          // margin-left: 10px;
          vertical-align: bottom;
        }
      }
    }
  }
}
</style>

